import React, { Component } from 'react';
import { connect } from 'react-redux'
import actions from '../../store/actions';
import ListItem from '../../components/ListItem'
class Index extends Component {
  componentDidMount() {
    const { list, menu } = this.props

    if(list.length === 0 ) {
      const action = actions.getList()
      this.props.dispatch(action)
    }
  
    if(menu.length === 0) {
      const action1 = actions.getMenu()
      this.props.dispatch(action1)
    }
    
  }
  render() {
    const { list, menu } = this.props
    console.log(list);
    return (
      <div>
        <div className="title">
          <div className="left">
            {
              menu.length > 0 && menu.map((v, i) => {
                return !v.code ? <span key={i}>{ v.title }</span> : null
              })
            }
          </div>
          <b onClick={ () => this.props.history.push('/menu') }>更多</b>
        </div>
        <div>
          {
          list.length > 0 && list.map((v, i) => {
            return <ListItem { ...v } key={i} 
              onClick={ () => { this.props.history.push({ 
                pathname: '/detail',
                state: v
               }) }  }
            ></ListItem>
          })
        }</div>

      </div>
    )
  }
}

const mapState = state => state
const mapDispatch = dispatch => ({ dispatch })
export default connect(mapState, mapDispatch)(Index);
